.header{
	font-weight:400;
}

$black: #000;
$red: #ff6c6b;
$accent:#00b5c3;
$lt-text: #c0c7c7;
$title: #383838;
$redCircle: #f04341;
$greenCircle:#96cf7d;
$yellowCircle:#f5b868;

#shell{
  width:600px;
  height:270px;
  background:$black;
  border-radius:8px;
  margin-left:6%;
  color:$title;
}

#upper{
  background: #e5e5e5; 
  background: -webkit-linear-gradient(#e5e5e5 0%, #b0b0b0 100%);
  background: linear-gradient(#e5e5e5 0%, #b0b0b0 100%);
  background-image: -moz-linear-gradient(#e5e5e5 0%, #b0b0b0 100%);
  -webkit-border-radius: 3px 3px 0px 0px;
  -moz-border-radius: 3px 3px 0px 0px;
  border-radius: 3px 3px 0px 0px;
  height:23px;
  text-align:center;
  padding-top:5px;
  border-bottom: 2px solid #333;
}

.title{
 margin-left:-70px; 
}

.button{
  width:12px;
  height:12px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  margin:3px 3px 3px 3px;
  float:left;
}

.red{
  background:$redCircle;
  border:1px solid darken(#f04341, 10%);
}

.yellow{
  background:$yellowCircle;
  border:1px solid darken(#f5b868, 10%);

}

.green{
  background:$greenCircle;
  border:1px solid darken(#96cf7d, 10%);

}

#main{
  padding:5px;
  color:$lt-text;
  .fore{
   color:$red; 
  }
  .accent{
   color:$accent;
  }
}

#main:before{
 content:"Welcome to harvest help page!";
 display:block;

}

#enter{
  display:inline;
  margin-left:.01em;
  width:100%;
  height:100%;
}

#enter:focus{
  outline:0px solid transparent;
}

.inner-light-top{
  position:relative;
  z-index:2;
  margin:0px 3px;
  height:10px;
  width:10px;
  border-radius:100%;
  //background:rgba(255,255,255,.5);
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}

.inner-light-bottom{
  margin:-1px 3px ;
  height:10px;
  width:10px;
  border-radius:100%;
  //background:rgba(255,255,255,.5);
  background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.1));
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.1));
}

.inner-dark-top{
  top:-10px;
  height:8px;
  width:10px;
  border-radius:100%;
  position:relative;
  z-index:1;
}

.red .inner-dark-top{
  background:darken(rgba($redCircle, .4), 10%);
  margin:-5px 0px ;
}

.yellow .inner-dark-top{
  background:darken(rgba($yellowCircle, .4), 10%);
  margin:3px 0px ;
}

.green .inner-dark-top{
  background:darken(rgba($greenCircle, .4), 10%);
  margin:3px 0px ;
}

